<clr-modal [(clrModalOpen)]="createEditRuleOpened" [clrModalStaticBackdrop]="true" [clrModalClosable]="false">
  <h3 class="modal-title">{{headerTitle | translate}}</h3>
  <hbr-inline-alert class="modal-title" (confirmEvt)="confirmCancel($event)"></hbr-inline-alert>
  <div class="modal-body" style="max-height: 85vh;">
    <clr-alert [hidden]='!deletedLabelCount' [clrAlertType]="'alert-warning'" [clrAlertSizeSmall]="true" [clrAlertClosable]="false"
      [(clrAlertClosed)]="alertClosed">
      <div class="alert-item">
        <span class="alert-text">{{deletedLabelInfo}}</span>
        <div class="alert-actions">
          <a class="alert-action" (click)=" alertClosed = true">{{'REPLICATION.ACKNOWLEDGE' | translate}}</a>
        </div>
      </div>
    </clr-alert>
    <form [formGroup]="ruleForm" novalidate>
      <section class="form-block">
        <div class="form-group form-group-override">
          <label class="form-group-label-override required">{{'REPLICATION.NAME' | translate}}</label>
          <label aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left" [class.invalid]='(ruleForm.controls.name.touched && ruleForm.controls.name.invalid) || !isRuleNameValid'>
            <input type="text" id="ruleName" pattern="^[a-z0-9]+(?:[._-][a-z0-9]+)*$" class="inputWidth" required maxlength="255" formControlName="name"
              #ruleName (keyup)='checkRuleName()' autocomplete="off">
            <span class="tooltip-content">{{ruleNameTooltip | translate}}</span>
          </label>
          <span class="spinner spinner-inline spinner-pos" [hidden]="!inNameChecking"></span>
        </div>
        <!--Description-->
        <div class="form-group form-group-override">
          <label class="form-group-label-override">{{'REPLICATION.DESCRIPTION' | translate}}</label>
          <textarea type="text" id="ruleDescription" class="inputWidth" row=3 formControlName="description"></textarea>
        </div>
        <!--Projects-->
        <div class="form-group form-group-override">
          <label class="form-group-label-override required">{{'REPLICATION.SOURCE_PROJECT' | translate}}</label>
          <div formArrayName="projects">
            <div class="projectInput inputWidth" *ngFor="let project of projects.controls; let i= index" [formGroupName]="i" (mouseleave)="leaveInput()">
              <label aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left" [class.invalid]='noProjectInfo'>
                <input *ngIf="!projectId" formControlName="name" type="text" class="inputWidth" value="name" required pattern="^[a-z0-9]+(?:[._-][a-z0-9]+)*$"
                  (keyup)='handleValidation()' (focus)="focusClear($event)" autocomplete="off">
                <input *ngIf="projectId" formControlName="name" type="text" class="inputWidth" value="name" readonly>
                <span class="tooltip-content">{{noProjectInfo | translate}}</span>
              </label>
              <div class="selectBox inputWidth" [style.display]="selectedProjectList.length ? 'block' : 'none'">
                <ul>
                  <li *ngFor="let project of selectedProjectList" (click)="selectedProjectName(project?.name)">{{project?.name}}</li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <!--images/Filter-->
        <div class="form-group form-group-override">
          <label class="form-group-label-override">{{'REPLICATION.SOURCE_IMAGES_FILTER' | translate}}</label>
          <div formArrayName="filters">
            <div class="filterSelect" *ngFor="let filter of filters.controls; let i=index">
              <div [formGroupName]="i">
                <div class="select floatSetPar">
                  <select formControlName="kind" #selectedValue (change)="filterChange($event, selectedValue.value)" id="{{i}}" name="{{filterListData[i]?.name}}">
                    <option *ngFor="let opt of filterListData[i]?.options;" value="{{opt}}">{{opt}}</option>
                  </select>
                </div>
                <label aria-haspopup="true" role="tooltip" class="tooltip tooltip-validation tooltip-md tooltip-bottom-left" [class.invalid]='(ruleForm.controls.filters.controls[i].controls.value.dirty || ruleForm.controls.filters.controls[i].controls.value.touched) && ruleForm.controls.filters.controls[i].controls.value.invalid'>
                  <input type="text" #filterValue required size="14" formControlName="value" [attr.disabled]="(filterListData[i]?.name=='label') ?'' : null">
                  <span class="tooltip-content">{{'TOOLTIP.EMPTY' | translate}}</span>
                </label>
                <div class="arrowSet" [hidden]="!(filterListData[i]?.name=='label')" (click)="openLabelList(selectedValue.value, i, $event)">
                  <clr-icon shape="angle"></clr-icon>
                </div>
                <clr-icon shape="warning-standard" class="is-solid is-warning" size="14" style="margin-left: -15px;" [hidden]="!deletedLabelCount || !(filterListData[i]?.name=='label')"></clr-icon>
                <clr-icon shape="times-circle" class="is-solid" (click)="deleteFilter(i)"></clr-icon>
                <div *ngIf="!withAdmiral">
                  <hbr-filter-label [projectId]="ruleForm.controls.projects.controls[0]?.value.project_id" [selectedLabelInfo]="filterLabelInfo"
                    [isOpen]="filterListData[i].isOpen" (selectedLabels)="selectedLabelList($event, i)" (closePanelEvent)="filterListData[i].isOpen = false"></hbr-filter-label>
                </div>
              </div>
            </div>

          </div>
          <clr-icon shape="plus-circle" class="is-solid" [hidden]="isFilterHide" (click)="addNewFilter()" style="margin-top: 11px;"></clr-icon>

        </div>
        <!--Targets-->
        <div class="form-group form-group-override">
          <label class="form-group-label-override  required">{{'DESTINATION.ENDPOINT' | translate}}</label>
          <div formArrayName="targets">
            <div class="select endpointSelect pull-left" *ngFor="let target of targets.controls; let i= index" [formGroupName]="i">
              <select id="ruleTarget" (change)="targetChange($event)" formControlName="id">
                <option *ngFor="let target of targetList" value="{{target.id}}">{{target.name}}-{{target.endpoint}}</option>
              </select>
            </div>
          </div>
          <label *ngIf="noEndpointInfo.length != 0" class="colorRed alertLabel">{{noEndpointInfo | translate}}</label>
          <span class="alertLabel goLink" *ngIf="noEndpointInfo.length != 0" (click)="goRegistry()">{{'REPLICATION.ENDPOINTS' | translate}}</span>
        </div>

        <!--Trigger-->
        <div class="form-group form-group-override">
          <label class="form-group-label-override">{{'REPLICATION.TRIGGER_MODE' | translate}}</label>
          <div formGroupName="trigger">
            <!--on trigger-->
            <div class="select floatSetPar">
              <select id="ruleTrigger" formControlName="kind" (change)="selectTrigger($event)">
                <option value="Manual">{{'REPLICATION.MANUAL' | translate}}</option>
                <option value="Immediate">{{'REPLICATION.IMMEDIATE' | translate}}</option>
                <option value="Scheduled">{{'REPLICATION.SCHEDULE' | translate}}</option>
              </select>
            </div>
            <!--on push-->
            <div formGroupName="schedule_param">
              <div class="select floatSet" [hidden]="!isScheduleOpt">
                <select name="scheduleType" formControlName="type" (change)="selectSchedule($event)">
                  <option value="Daily">{{'REPLICATION.DAILY' | translate}}</option>
                  <option value="Weekly">{{'REPLICATION.WEEKLY' | translate}}</option>
                </select>
              </div>
              <!--weekly-->
              <span [hidden]="!weeklySchedule || !isScheduleOpt">on &nbsp;</span>
              <div [hidden]="!weeklySchedule || !isScheduleOpt" class="select floatSet" style="width:104px">
                <select name="scheduleDay" formControlName="weekday">
                  <option value="1">{{'WEEKLY.MONDAY' | translate}}</option>
                  <option value="2">{{'WEEKLY.TUESDAY' | translate}}</option>
                  <option value="3">{{'WEEKLY.WEDNESDAY' | translate}}</option>
                  <option value="4">{{'WEEKLY.THURSDAY' | translate}}</option>
                  <option value="5">{{'WEEKLY.FRIDAY' | translate}}</option>
                  <option value="6">{{'WEEKLY.SATURDAY' | translate}}</option>
                  <option value="7">{{'WEEKLY.SUNDAY' | translate}}</option>
                </select>
              </div>
              <!--daily/time-->
              <span [hidden]="!isScheduleOpt">at &nbsp;</span>
              <input [hidden]="!isScheduleOpt" type="time" formControlName="offtime" required value="08:00" />
            </div>
          </div>
          <div style="width: 100%;" [hidden]="!isImmediate">
            <clr-checkbox [clrChecked]="false" id="ruleDeletion" formControlName="replicate_deletion">
              {{'REPLICATION.DELETE_REMOTE_IMAGES' | translate}}
            </clr-checkbox>
          </div>
          <div style="width: 100%;">
            <clr-checkbox [clrChecked]="true" id="ruleExit" formControlName="replicate_existing_image_now">
              {{'REPLICATION.REPLICATE_IMMEDIATE' | translate}}
            </clr-checkbox>
          </div>
        </div>
        <div style="display:block;text-align:center">
          <span class="spinner spinner-inline" [hidden]="inProgress === false"></span>
        </div>
      </section>
    </form>
  </div>
  <div class="modal-footer">
    <button type="button" id="ruleBtnCancel" class="btn btn-outline" [disabled]="this.inProgress" (click)="onCancel()">{{ 'BUTTON.CANCEL' | translate }}</button>
    <button type="submit" id="ruleBtnOk" class="btn btn-primary" (click)="onSubmit()" [disabled]="!ruleForm.valid || !isValid || !hasFormChange()">{{ 'BUTTON.SAVE' | translate }}</button>
  </div>
</clr-modal>